<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户详情页</title>
<link href="../favicon.ico" rel="shortcut icon"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
</head>
<body class="gray-bg">
<div class="container-fluid">
	<div class="row animated fadeInRight">
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>个人资料</h5>
				</div>
				<div>
					<div class="ibox-content no-padding border-left-right" align="center">
						<img class="img-circle" src="<%=path %>/images/000head_pic.png" id="touXiang">
					</div>
					<div class="ibox-content profile-content">
						<h4><strong id="name">张三</strong>&nbsp;&nbsp;<span id="biaoQian"></span></h4>
						<p><i class="fa fa-map-marker"></i> 上海市闵行区绿地科技岛广场A座2606室</p>
						<h5>关于我</h5>
						<table class="table">
							<tbody>
								<tr>
									<td>电话：</td>
									<td style="width:40%;"><span id="tel"></span></td>
									<td>性别：</td>
									<td style="width:40%;"><span id="sex"></span></td>
								</tr>
								<tr>
									<td>微博：</td>
									<td><span id="weibo"></span></td>
									<td>微信：</td>
									<td><span id="weixin"></span></td>
								</tr>
								<tr>
									<td>QQ：</td>
									<td><span id="QQ"></span></td>
									<td>生日</td>
									<td><span id="birthday"></span></td>
								</tr>
								<tr>
									<td>邮箱：</td>
									<td><span id="email"></span></td>
									<td>来源：</td>
									<td><span id="source"></span></td>
								</tr>
							</tbody>
						</table>
						<div class="user-button">
							<div class="row">
								<div class="col-sm-6">
									<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> 发送消息</button>
								</div>
								<div class="col-sm-6">
									<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> 编辑</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>消费信息</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-6">
							<p>累计消费：<span id="totalCost">0</span>元</p>
							<p>第一次消费：<span id="firstCost">无消费记录</span></p>
							<br/><br/>
							<div class="progress progress-bar-default" style="margin-bottom: 0;">
								<!-- 
	                            <div style="width: 44%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="44" role="progressbar" class="progress-bar"></div>
	                             -->
	                            <div style="width: 44%" class="progress-bar" id="totalCostOrderBar"></div>
	                        </div>
	                        <p>累计消费<span id="totalCost">0</span>元排名<span id="totalCostOrder"></span></p>
	                        
	                        <div class="progress progress-bar-default" style="margin-bottom: 0;">
	                            <div style="width: 44%" class="progress-bar" id="costCountOrderBar"></div>
	                        </div>
	                        <p>消费总数<span id="costCount">0</span>次排名<span id="costCountOrder"></span></p>
						</div>
						<div class="col-sm-6">
							<p>频率/时间属性：<span id="pinLv1">0</span>次/<span id="pinLv2">无消费记录</span></p>
							<p>最近消费：<span id="lastCost">无消费记录</span></p>
						</div>
					</div>
				</div>
			</div>
	
		</div>
	</div>
	
	<!-- 历史行为信息 -->
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>历史行为信息</h5>
                    </div>
                    <div class="ibox-content">
                    	<table class="table">
                    		<thead>
                    			<tr>
                    				<th>行为</th>
                    				<th>活动名</th>
                    				<th>参与情况</th>
                    				<th>处理状态</th>
                    				<th>渠道</th>
                    			</tr>
                    		</thead>
                    		<tbody id="customerAction">
                    		</tbody>
                    	</table>
                    	<!-- 
                    	<div class="row">
		                    <div class="col-sm-12">
								<button class="btn btn-primary btn-block"><i class="fa fa-arrow-down"></i> 显示更多</button>
							</div>
						</div>
						 -->
                    </div>
                </div>
		</div>
	</div>
	<div class="row">
<!-- 		<div class="col-sm-4 col-sm-offset-2"> -->
		<div class="col-sm-12">
			<button class="btn btn-primary btn-block" id="getMore"><i class="fa fa-arrow-down"></i> 显示更多</button>
		</div>
	</div>
	<br/><br/>
</div>
</body>
<script type="text/javascript" src="<%=path%>/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/bootstrap.min.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var startIndex = 0;		//起始数
var pageSize = 10;		//每页大小
var totalCount = 0;
var customerId = 0;
$(function(){
	customerId = GetQueryString("customerID");
	
	init();
	
	$("#getMore").click(function(){
		if((startIndex+1) * pageSize < totalCount){
			startIndex += 1;
			customerAction();
		}
	});
});

function init(){
	customerInfo();
	customerAction();
}

//客户信息
function customerInfo(){
	$.post(path+'/api/custome/getCustomerInfo', {'customerID': customerId}, function(data) {
		data = JSON.parse(data);
		var value = data;
		if(value.bcCustomer == null){
			return ;
		}
		
		$("#touXiang").attr("src",(value.bcCustomer.avatar==null || value.bcCustomer.avatar==undefined || value.bcCustomer.avatar=="") ? path+"/images/000head_pic.png" : value.bcCustomer.avatar)
		$("#name").text(value.bcCustomer.name);
		$("#tel").text(value.bcCustomer.phone == null ? '' : value.bcCustomer.phone);
		$("#sex").text(value.bcCustomer.gender);
		$("#weibo").text(value.bcCustomer.weibo == null ? '' : value.bcCustomer.weibo);
		$("#weixin").text(value.bcCustomer.wechat == null ? '' :value.bcCustomer.wechat);
		$("#QQ").text("");
		$("#email").text(value.bcCustomer.email == null ? '' : value.bcCustomer.email);
		$("#birthday").text(value.bcCustomer.birthday == null ? '' :value.bcCustomer.birthday);
		$("#source").text(value.bcCustomer.customer_source == null ? "未知" : value.bcCustomer.customer_source);
		var biaoQian = "";
		if (value.newOrOldCustomer == 2) {
			biaoQian += '<img src="'+path+'/bc/images/host_6.png" />';
		} else if (value.newOrOldCustomer == 3) {
			biaoQian += '<img src="'+path+'/bc/images/host_3.png" />';
		}
		if (value.transactionFrequency == 2) {
			biaoQian += '<img src="'+path+'/bc/images/host_2.png" />';
		} else if (value.transactionFrequency == 3) {
			biaoQian += '<img src="'+path+'/bc/images/host_7.png" />';
		} else if (value.transactionFrequency == 4) {
			biaoQian += '<img src="'+path+'/bc/images/host_5.png" />';
		}
		if (value.transactionLimit == 2) {
			biaoQian += '<img src="'+path+'/bc/images/host_1.png" />';
		} else if (value.transactionLimit == 3) {
			biaoQian += '<img src="'+path+'/bc/images/host_8.png" />';
		} else if (value.transactionLimit == 4) {
			biaoQian += '<img src="'+path+'/bc/images/host_9.png" />';
		}
		$("#biaoQian").html(biaoQian);
		$.each($("#totalCost"),function(){
			$(this).text(value.countRanking.moneyTotal == null ? 0 : value.countRanking.moneyTotal);
		});
		$("#firstCost").text((value.countRanking.first_write_off_time == null ? '暂无消费记录' : value.countRanking.first_write_off_time)+(value.countRanking.first_consumption_amount == null ? "" : "/"+ value.countRanking.first_consumption_amount));
		$("#totalCostOrder").text((value.countRanking.moneyRanking)+'/'+(value.countRanking.customerCount));
		$("#costCount").text(value.countRanking.totalConsumption);
		$("#costCountOrder").text(value.countRanking.countRanking+'/'+value.countRanking.customerCount);
		$("#totalCostOrderBar").width(Math.random()*100+"%");
		$("#costCountOrderBar").width(Math.random()*100+"%");
// 		$("#totalCostOrderBar").width(((value.countRanking.moneyRanking)/(value.countRanking.customerCount)*100)+"%");
// 		$("#costCountOrderBar").width((value.countRanking.countRanking/value.countRanking.customerCount*100)+"%");
		$("#pinLv1").text(value.countRanking.totalConsumption == null ? 0 : value.countRanking.totalConsumption);
		$("#pinLv2").text((value.countRanking.totalDay == -1 ? "无消费记录" : value.countRanking.totalDay+"天"));
		$("#lastCost").text((value.countRanking.lately_write_off_time == null ? '暂无消费记录' : value.countRanking.lately_write_off_time)+(value.countRanking.lately_consumption_amount == null ? "" : "/" + value.countRanking.lately_consumption_amount));
	});
}

function customerAction(){
	$.post(path+'/api/customer_action/getCustomerAction', {'id': customerId,startIndex:startIndex}, function(data) {
		data = JSON.parse(data);
		
		totalCount = data.totalCount;
		
		if((startIndex+1) * pageSize > totalCount){
			$("#getMore").removeClass("btn-primary").addClass("btn-default");
		}
		
		$.each( data.actionList,function(n, value){
			var tr = "";
			tr += '<tr>';
			tr += '<td>'+value.content+'</td>';
			tr += '<td>'+getName(value)+'</td>';
			tr += '<td>'+(value.enjoyStatus == 0 ? "已参与" :"已参与")+'</td>';
			tr += '<td>'+(value.handleStatus == 0 ? "未处理" : "已处理")+'</td>';
			tr += '<td>'+(value.source == null ? "未知" :getSourceTitle(value.source))+'</td>';
			tr += '</tr>';
			$("#customerAction").append(tr);
		});
	});
}

function GetQueryString(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r!=null)return  unescape(r[2]); return null;
}
function getName(data){
	var name="未知";
	if(data.type=="3"){
		if(StringEmpty(data.activityName)){
			name=data.activityName;
		}
	}else{
		if(StringEmpty(data.activityName)){
			name=data.activityName;
		}
	}
	return name;
}
function getSourceTitle(source){
	var title;
	switch (source) {
	case "1":
		title="微博";
		break;
	case "2":
		title="微信";
		break;
	case "3":
		title="QQ";
		break;
	case "4":
		title="活动";
	case "5":
		title="pc网页";
	case "6":
		title="短信";
		break;
	default:
		title="未知";
		break;
	}
	return title;
}
//判断字符串是否为空
function StringEmpty(content) {
	if (content == undefined || content == "" || content == null) {
		return false;
	} else {
		return true;
	}
}
</script>
</html>